<!-- 调整详情 -->
<template>
  <div class="approve_detail">
    <approve-msg ref="approveMsg" @success="onSuccess" class="approve_msg" />
    <div class="content_warp">
      <Row v-show="tipsFun()">
        <Col span="24" class="tips">
          <Icon type="md-alert" class="tips_icon" />
          <span v-if="info.status == 'APPROVAL'">
            该调整正在审核。
            <span class="color_red">注意：您所调整的{{ this.orderType }}面积或总价，将在审核通过后生效</span>
          </span>
          <div v-if="info.status == 'NO_PASS'" class="reject_warp">
            <span class="reject_title">驳回原因</span>
            <span style="display: block; paddingleft: 25px">
              {{ info.auditReason }}
            </span>
          </div>
          <div class="fu" v-if="info && info.auditFile && info.auditFile.annex">
            <span class="reject_title">图片附件：</span>
            <span
              class="sp1"
              v-for="(item, index) in info.auditFile.annex"
              :key="index"
              @click="lookImg(index)">
              <img :src="item" />
              <!-- <Icon type="ios-eye" class="ic" />  -->
            </span>
          </div>
          <div class="fu" v-if="info && info.auditFile && info.auditFile.file">
            <span class="reject_title">文件附件：</span>
            <span
              class="sp2"
              v-for="(item, index) in info.auditFile.file"
              :key="index"
              @click="downFile(item)">
              {{ item.name }}
            </span>
          </div>
        </Col>
      </Row>
      <dt-info ref="info" :labelWidth="160" :options="options" :info="info" v-show="showStatus"></dt-info>
      <span class="tips" v-if="count">
        <Icon type="md-alert" class="tips_icon" />
        <span v-if="orderType == '认购'" style="color: #606266">
          有{{ count }}个订单已退订或转签约并从调整单列表中移除，不可再次发起调整；
        </span>
        <span v-if="orderType == '签约'" style="color: #606266">
          有{{ count }}个订单已退订并从调整单列表中移除，不可再次发起调整；
        </span>
        <span style="color: #3366ff; cursor: pointer" @click="unsubscribeFun">查看订单明细</span>
      </span>
      <dt-grid ref="table" page :onFetch="onFetch">
        <div slot="btn" class="flex btn-content">
          <Button type="success" @click="changeShow()" style="margin-right: 8px">
            {{ showStatusTxt }}详情
          </Button>
          <Button
            type="success"
            @click="exportFun()"
            v-if="
              (orderType == '认购' && unlocking('0104010402')) ||
              (orderType == '签约' && unlocking('0104030402'))
            "
            style="margin-right: 8px">
            导出Excel
          </Button>
        </div>
      </dt-grid>
    </div>
    <!--客户详情-->
    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }" :footer-hide="true">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
    <unsubscribe-list ref="unsubscribeRef" />
  </div>
</template>

<script>
  import approveMsg from '../components/approveMsg'
  import approveDetailopt from '../opt/approveDetailopt'
  import detailColumn from '../opt/detailColumns'
  import detailPage from '@/views/casemanagement/allCustomersManagement/details.vue'
  import adjustMgr from '@/biz/sales/adjustOrder'
  import toolMgr from '@/biz/base/tool.js'
  import unsubscribeList from './unsubscribeList.vue'
  export default {
    components: { approveMsg, detailPage, unsubscribeList },
    data() {
      return {
        showIndex: 0,
        preViewImg: [],
        orderType: '认购',
        showStatus: false,
        showStatusTxt: '展开',
        detailsFlag: false,
        info: {},
        options: [],
        filterParams: {},
        tipsShow: true,
        count: null,
        orderIds: []
      }
    },
    methods: {
      downFile(file) {
        toolMgr.downloadFile(file.url, file.name)
      },
      lookImg(index) {
        console.log(index)
        this.preViewImg = this.info.auditFile.annex
        this.showIndex = index
        this.$refs.preViewImage.show()
      },
      //审核 或 撤销审核
      onSuccess() {
        console.log(123123)
        this.getAdjustment()
      },
      onLinkUser(row) {
        console.log(row, '弹窗客户详情')
        if (row.customerName == '-') {
          return false
        }
        this.detailsFlag = true
        this.detailsParams = {
          customerId: row.customerId, // 手机号唯一编码
          userCustomerId: row.userCustomerId, // 客户信息唯一编码
          buildingId: row.housesId,
          userId: row.userId,
          cityCode: row.cityId
        }
      },
      orderDetailFun(row) {
        let orderParams = {}
        let type = this.orderType
        switch (type) {
          case '认购':
            orderParams = {
              examineBtn: false,
              orderStatusName: '认购',
              orderNum: row.orderCode, // 单号
              businessId: row.orderId, // 业务id
              buildingId: row.housesId
            }
            break
          case '签约':
            orderParams = {
              examineBtn: false,
              orderStatusName: '签约',
              orderNum: row.orderCode, // 单号
              businessId: row.orderId, // 业务id
              buildingId: row.housesId,
              subscriptionId: row.subscriptionId
            }
            break
          default:
            break
        }
        this.linkOrderFun(orderParams)
      },
      exportFun() {
        let params = { ...this.filterParams }
        params.adjustId = params.adjustmentId
        adjustMgr.exportAdjustDetailFun(params).then((res) => {})
      },
      changeShow() {
        this.showStatus = !this.showStatus
        this.showStatusTxt = this.showStatus ? '收起' : '展开'
        this.$refs.table.fixHeight()
      },
      onFetch(data) {
        let params = {
          ...data,
          adjustmentId: this.$route.query.adjustmentId
        }
        this.filterParams = { ...params }
        return adjustMgr.getAdjustOrderList(params).then((res) => {
          return res
        })
      },
      init() {
        this.$refs.table.init(this, new detailColumn(this))
        this.$refs.table.fetch()
      },
      //查询调整单详情
      getAdjustment() {
        let params = {
          adjustmentId: this.$route.query.adjustmentId
        }
        adjustMgr.getAdjustment({ ...params }).then((res) => {
          res.auditFile = JSON.parse(res.auditFile)
          this.info = { ...res }
          this.options = approveDetailopt.options(this)
          this.$refs.approveMsg.show(this.info)
        })
      },
      tipsFun() {
        return this.info.status == 'APPROVAL' || this.info.status == 'NO_PASS'
      },
      unsubscribeFun() {
        let data = {
          orderType: this.orderType,
          orderIds: this.orderIds
        }
        this.$refs.unsubscribeRef.show(data)
      },
      getAdjustOrderTopDetails() {
        let params = {
          adjustmentId: this.$route.query.adjustmentId
        }
        adjustMgr.getAdjustOrderTopDetails(params).then((res) => {
          this.count = res.count
          this.orderIds = res.orderIds
        })
      }
    },
    mounted() {
      this.orderType = this.$route.query.orderType
      this.getAdjustment()
      this.init()
      if (this.$tool.getStorage('isbuildFlag') == 'buildpage') {
        this.getAdjustOrderTopDetails()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .approve_detail {
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;

    .content_warp {
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }

    .approve_msg {
      margin-bottom: 20px;
    }

    .tips {
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }

      .reject_warp {
        display: inline;

        .reject_title {
          font-size: 20px;
        }
      }

      .color_red {
        color: red;
      }
    }

    .fu {
      .sp2 {
        margin-top: 10px;
        background: #e6f7ff;
        border-color: #91d5ff;
        display: inline-block;
        padding: 0 5px;
        height: 14px;
        line-height: 14px;
        margin-left: 5px;
        color: #1890ff !important;
        cursor: pointer;
      }

      .sp1 {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 1px #eee solid;
        margin-left: 5px;
        vertical-align: -15px;
        cursor: pointer;
        position: relative;

        .ic {
          position: absolute;
          top: 45%;
          left: 45%;
          z-index: 4;
        }

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
